<template>
  <div class="childrenbox">
    <div class="neibox">
      <div class="tabs">
        <el-page-header @back="$router.back()" content=""></el-page-header>
        <div 
          class="tab" 
          @click="where(item)" 
          v-for="(item,index) in tablist" 
          :key="index"
          :class="{'active':activePath.reportName==item.reportName}">
          {{item.reportName}} <i v-if="tablist.length-1!==index" class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div>
        <div class="form">
          <el-form ref="form" :model="formdata" label-width="80px">
              
          </el-form>
        </div>
        <TopTitle @command="command" @daochu="daochu" @shuaxin="gettablelist" />
        <div class="tablebox">
          <el-table
            :size="iissize"
            border
            :header-cell-style="{ 'text-align': 'center', background: '#f5f5f5' }"
            v-loading="loading"
            height="calc(100% - 1px)"
            style="width: 100%"
            ref="tabledataref"
            :data="tableData"
          >
            <el-table-column label="序号" type="index" width="50" />
            <el-table-column label="企业" prop="companyName" min-width="120" />
            <el-table-column label="部门" prop="companyName" min-width="120" />
            <el-table-column label="班组" prop="companyName" min-width="120" />
            <el-table-column label="日期" prop="companyName" min-width="120" />
            <el-table-column
              v-for="(item, index) in tableConfig"
              :key="index"
              :label="item.label"
              min-width="100"
            >
              <template #default="{ row }">
                <el-link type="primary" :underline="false" @click="toreport(row)" class="link">日超额情况</el-link>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="100">
              <template #default="{ row }">
                <div>
                  <el-link type="primary" :underline="false" @click="toreport(row)" class="link">日超额情况</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fenye">
          <el-pagination
              background
              layout="prev, pager, next"
              :current-page.sync="pageNo"
              @current-change="gettablelist"
              :page-size="15"
              :total="total"
            >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TopTooltip from '@/components/TopTitle/newtitle.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
export default {
  name: 'CallPoliceChildren',
  components: {
    TopTooltip,
    TableColumn
  },
  data() {
    return {
      pageNo:0,
      total:0,
      iissize: 'medium',
      tableData: [{}],
      tableConfig:[],
      loading:false,
      tablist:[],
      activePath:{},
      formdata:{}
    }
  },

  mounted() {
    const serializedRow = this.$route.params
    this.activePath=serializedRow
    this.tablist=[serializedRow]
    console.log(serializedRow)
  },

  methods: {
    gettablelist(){

    },
    where(val){
      this.activePath=val
      const targetIndex = this.tablist.findIndex(item => item.reportName === val.reportName)
      this.tablist.splice(targetIndex + 1)
    },
    toreport(row){
      this.tablist.push({...row,reportName:'日超额情况',reportValue:'day'})
      this.activePath=this.tablist[this.tablist.length-1]
    },
     // 导出
    daochu() {
      exportexcel(
        '/ecm-microservice-biz/ecm/team/work/hours/set/export',
        {companyId:this.formdata.companyId,yearMonth:this.formdata.yearMonth.replace('-', '')},
        '班组工时'
      )
    },
    // 表格密度调节
    command(val) {
      this.iissize = val
    },
  }
}
</script>
<style lang="scss" scoped>
.childrenbox {
  height: 100%;
  padding: 10px;
  .neibox {
    padding: 20px;
    height: 100%;
    background-color: #fff;
    .tabs{
      display: flex;
      align-items: center;
      .tab{
        margin-right: 10px;
        cursor: pointer;
        font-size: 14px;
        color: #606266;
      }
      .active{
        font-weight: 600;
        color: #000;
      }
    }
    .tablebox {
      height: 80%;
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>
